<template>
  <div class="app-container">
    <el-form ref="formData" :model="machineForm" :rules="rulesMachine" :inline="true" class="demo-form-inline" label-width="120px">
      <el-row>
        <el-col :span="16">
          <el-form-item label="数据类型:" prop="spiderType" class="my-form-item">
            <el-select v-model="machineForm.spiderType" placeholder="请选择补充类型" size="small" @change="spiderTypeChange">
              <el-option
                v-for="item in spiderTypeList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="16">
          <el-form-item label="服务器:" prop="machine" class="my-form-item">
            <el-select v-model="machineForm.machine" placeholder="请选择服务器" size="small" disabled>
              <el-option
                v-for="item in machineList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="16">
          <el-form-item label="数据库:" prop="database" class="my-form-item">
            <el-select v-model="machineForm.database" placeholder="请选择数据库" size="small" disabled>
              <el-option
                v-for="item in databaseList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="16">
          <el-form-item label="数据表:" prop="tableName" class="my-form-item">
            <el-select v-model="machineForm.tableName" placeholder="请选择数据表" size="small">
              <el-option
                v-for="item in tableNameList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

    </el-form>

    <el-form v-show="machineForm.spiderType === 0" ref="formData" :model="formData" :rules="rules" :inline="true" class="demo-form-inline" label-width="120px">
      <el-row>
        <el-col :span="16">
          <el-form-item label="标题:" prop="title" class="my-form-item">
            <el-input
              v-model="formData.title"
              placeholder="请输入标题"
              clearable
              style="width: 200%"
              size="small"
            />
          </el-form-item>
          <el-form-item>
            <span style="color:#999; display: block; margin-left: 200px;">（数据的标题 title 字段）</span>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="16">
          <el-form-item label="发布时间:" prop="pubtime" class="my-form-item">
            <el-date-picker
              v-model="formData.pubtime"
              type="date"
              placeholder="请选择发布时间"
              style="width: 200px"
              value-format="yyyy-MM-dd"
              size="small"
            />
          </el-form-item>
          <el-form-item>
            <span style="color:#999; display: block; margin-left: 5px;">（数据的发布时间 pubtime 字段）</span>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="16">
          <el-form-item label="省级:" prop="areaId" class="my-form-item">
            <el-select
              v-model="formData.areaId"
              filterable
              placeholder="请选择省级"
              style="width: 200px"
              size="small"
            >
              <el-option
                v-for="item in cities"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
            <span style="color:#999; display: block; margin-left: 5px;">（省级的 area_id 字段）</span>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="16">
          <el-form-item label="来源地区:" prop="location" class="my-form-item">
            <el-input
              v-model="formData.location"
              placeholder="请输入来源地区"
              clearable
              style="width: 200px"
              size="small"
            />
          </el-form-item>
          <el-form-item>
            <span style="color:#999; display: block; margin-left: 5px;">（数据的来源地区 location 字段）</span>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="16">
          <el-form-item label="来源:" prop="author" class="my-form-item">
            <el-input
              v-model="formData.author"
              placeholder="请输入来源"
              clearable
              style="width: 200px"
              size="small"
            />
          </el-form-item>
          <el-form-item>
            <span style="color:#999; display: block; margin-left: 5px;">（数据的来源 author 字段）</span>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="16">
          <el-form-item label="链接:" prop="outurl" class="my-form-item">
            <el-input
              v-model="formData.outurl"
              placeholder="请输入链接"
              clearable
              style="width: 300px"
              size="small"
            />
          </el-form-item>
          <el-form-item>
            <span style="color:#999; display: block; margin-left: 5px;">（数据的链接 outurl 字段）</span>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="16">
          <el-form-item label="类型:" prop="cateId" class="my-form-item">
            <el-select
              v-model="formData.cateId"
              filterable
              placeholder="请选择类型"
              style="width: 200px"
              size="small"
            >
              <el-option
                v-for="item in cateIds"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
            <span style="color:#999; display: block; margin-left: 5px;">（招标类型 cate_id 字段）</span>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="16">
          <el-form-item label="正文:" prop="info" class="my-form-item">
            <el-input
              v-model="formData.info"
              type="textarea"
              :rows="10"
              placeholder="请输入正文"
              style="width: 300%"
              size="small"
            />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="16">
          <el-form-item label="预览:" class="my-form-item">
            <el-button type="info" size="mini" @click="previewHtml">预览正文</el-button>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="16">
          <el-form-item label="操作:" class="my-form-item">
            <el-button type="primary" size="mini" @click="addData">提交</el-button>
            <el-button type="primary" size="mini" @click="resetData">重置</el-button>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="16">
          <el-form-item v-if="dataVo.dataId !== 0" label="数据id: " class="my-form-item">
            <label>{{ dataVo.dataId }}</label>
            <span style="padding-left: 20px">
              <el-button type="info" size="mini" @click="getData">查看</el-button>
            </span>
          </el-form-item>
        </el-col>
      </el-row>

    </el-form>

    <el-form v-show="machineForm.spiderType === 5" ref="formDataPolicy" :model="formDataPolicy" :rules="rulesPolicy" :inline="true" class="demo-form-inline" label-width="120px">
      <el-row>
        <el-col :span="16">
          <el-form-item label="标题:" prop="title" class="my-form-item">
            <el-input
              v-model="formDataPolicy.title"
              placeholder="请输入标题"
              clearable
              style="width: 200%"
              size="small"
            />
          </el-form-item>
          <el-form-item>
            <span style="color:#999; display: block; margin-left: 200px;">（数据的标题 title 字段）</span>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="16">
          <el-form-item label="发布时间:" prop="pubtime" class="my-form-item">
            <el-date-picker
              v-model="formDataPolicy.pubtime"
              type="date"
              placeholder="请选择发布时间"
              style="width: 200px"
              value-format="yyyy-MM-dd"
              size="small"
            />
          </el-form-item>
          <el-form-item>
            <span style="color:#999; display: block; margin-left: 5px;">（数据的发布时间 pubtime 字段）</span>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="16">
          <el-form-item label="省级:" prop="areaId" class="my-form-item">
            <el-select
              v-model="formDataPolicy.areaId"
              filterable
              placeholder="请选择省级"
              style="width: 200px"
              size="small"
            >
              <el-option
                v-for="item in cities"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
            <span style="color:#999; display: block; margin-left: 5px;">（省级 area_id 字段）</span>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="16">
          <el-form-item label="市级:" prop="cityId" class="my-form-item">
            <el-select
              v-model="formDataPolicy.cityId"
              filterable
              placeholder="请选择市级"
              style="width: 200px"
              size="small"
            >
              <el-option
                v-for="item in cities"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
            <span style="color:#999; display: block; margin-left: 5px;">（市级的 city_id 字段，目前暂未爬取省级以下单位，故与省级保持一致）</span>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="16">
          <el-form-item label="来源:" prop="author" class="my-form-item">
            <el-input
              v-model="formDataPolicy.author"
              placeholder="请输入来源"
              clearable
              style="width: 200px"
              size="small"
            />
          </el-form-item>
          <el-form-item>
            <span style="color:#999; display: block; margin-left: 5px;">（数据的来源 author 字段）</span>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="16">
          <el-form-item label="链接:" prop="outurl" class="my-form-item">
            <el-input
              v-model="formDataPolicy.outurl"
              placeholder="请输入链接"
              clearable
              style="width: 300px"
              size="small"
            />
          </el-form-item>
          <el-form-item>
            <span style="color:#999; display: block; margin-left: 5px;">（数据的链接 outurl 字段）</span>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="16">
          <el-form-item label="标签:" prop="tags" class="my-form-item">
            <el-select
              v-model="formDataPolicy.tags"
              multiple
              placeholder="请选择类型"
              style="width: 200px"
              size="small"
            >
              <el-option
                v-for="item in tags"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
            <span style="color:#999; display: block; margin-left: 5px;">（政策类型 tag 字段）</span>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="16">
          <el-form-item label="来源等级:" prop="level" class="my-form-item">
            <el-select
              v-model="formDataPolicy.level"
              placeholder="请选择类型"
              style="width: 200px"
              size="small"
            >
              <el-option
                v-for="item in levels"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
            <span style="color:#999; display: block; margin-left: 5px;">（政策类型 level 字段）</span>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="16">
          <el-form-item label="正文:" prop="info" class="my-form-item">
            <el-input
              v-model="formDataPolicy.info"
              type="textarea"
              :rows="10"
              placeholder="请输入正文"
              style="width: 300%"
              size="small"
            />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="16">
          <el-form-item label="预览:" class="my-form-item">
            <el-button type="info" size="mini" @click="previewHtml">预览正文</el-button>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="16">
          <el-form-item label="操作:" class="my-form-item">
            <el-button type="primary" size="mini" @click="addData">提交</el-button>
            <el-button type="primary" size="mini" @click="resetDataPolicy">重置</el-button>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="16">
          <el-form-item v-if="dataVo.dataId !== 0" label="数据id: " class="my-form-item">
            <label>{{ dataVo.dataId }}</label>
            <span style="padding-left: 20px">
              <el-button type="info" size="mini" @click="getData">查看</el-button>
            </span>
          </el-form-item>
        </el-col>
      </el-row>

    </el-form>

    <el-dialog
      title="数据详情"
      :visible.sync="dialogVisible"
      :close-on-click-modal="true"
      class="dialog"
    >
      <div class="table1">
        <el-table
          ref="tableList"
          :data="dataObj"
          border
          stripe
          :header-cell-style="headStyle"
          :cell-style="cellStyle"
        >

          <el-table-column prop="dataId" label="数据ID" width="120" />
          <el-table-column prop="title" label="标题" />
          <el-table-column label="省级" width="120">
            {{ areaLabel }}
          </el-table-column>
          <el-table-column prop="location" label="来源地区" width="100" />
          <el-table-column prop="author" label="来源" width="200" :show-overflow-tooltip="true" />
          <el-table-column label="分类" width="100">
            {{ cateLabel }}
          </el-table-column>
          <el-table-column prop="pubtime" label="发布时间" width="165" />
          <el-table-column prop="addTime" label="入库时间" width="180" />
          <el-table-column label="正文" width="100">
            <el-button type="info" size="mini" @click="previewHtml2">
              预览
            </el-button>
          </el-table-column>
          <!--          <el-table-column prop="intro" label="附件" width="100">-->
          <!--            <template slot-scope="scope">-->
          <!--              <el-button type="info" size="mini" @click="downloadFile(scope.row.intro)">-->
          <!--                下载-->
          <!--              </el-button>-->
          <!--            </template>-->
          <!--          </el-table-column>-->
          <el-table-column prop="outurl" label="链接" width="100">
            <template slot-scope="scope">
              <el-button type="info" size="mini">
                <a :href="scope.row.outurl" target="_blank">跳转</a>
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-dialog>

    <el-dialog
      title="数据详情"
      :visible.sync="dialogVisiblePolicy"
      :close-on-click-modal="true"
      class="dialog"
    >
      <div class="table1">
        <el-table
          ref="tableListPolicy"
          :data="dataObjPolicy"
          border
          stripe
          :header-cell-style="headStyle"
          :cell-style="cellStyle"
        >

          <el-table-column prop="dataId" label="数据ID" width="100" />
          <el-table-column prop="title" label="标题" />
          <el-table-column label="省级" width="120">
            {{ areaLabel }}
          </el-table-column>
          <el-table-column label="市级" width="120">
            {{ cityLabel }}
          </el-table-column>
          <el-table-column prop="author" label="来源" width="200" :show-overflow-tooltip="true" />
          <el-table-column prop="level" label="来源等级" width="150">
            <template slot-scope="scope">
              <span v-if="scope.row.level === 1">国家级</span>
              <span v-else-if="scope.row.level === 2">省级</span>
              <span v-else-if="scope.row.level === 3">市级</span>
            </template>
          </el-table-column>
          <el-table-column prop="tag" label="标签分类" width="150" />
          <el-table-column prop="pubtime" label="发布时间" width="165" />
          <el-table-column prop="addTime" label="入库时间" width="180" />
          <el-table-column label="正文" width="100">
            <el-button type="info" size="mini" @click="previewHtml2">
              预览
            </el-button>
          </el-table-column>
          <!--          <el-table-column prop="intro" label="附件" width="100">-->
          <!--            <template slot-scope="scope">-->
          <!--              <el-button type="info" size="mini" @click="downloadFile(scope.row.intro)">-->
          <!--                下载-->
          <!--              </el-button>-->
          <!--            </template>-->
          <!--          </el-table-column>-->
          <el-table-column prop="outurl" label="链接" width="100">
            <template slot-scope="scope">
              <el-button type="info" size="mini">
                <a :href="scope.row.outurl" target="_blank">跳转</a>
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-dialog>

    <!-- 弹窗模板 -->
    <modal name="addData-modal">
      <h2 style="font-size: 20px; text-align: center;">预览</h2>
      <!-- iframe 内容 -->
      <iframe :srcdoc="iframeContent" />
    </modal>

    <!-- 弹窗模板 -->
    <modal name="addData-modal2">
      <h2 style="font-size: 20px; text-align: center;">预览</h2>
      <!-- iframe 内容 -->
      <iframe :srcdoc="iframeContent" />
    </modal>

  </div>
</template>

<script>
// import { MessageBox } from 'element-ui'
import crawlerDetailApi from '@/api/crawler/crawlerDetail'

export default {
  name: 'AddData',
  data() {
    return {
      machineForm: {
        spiderType: '',
        machine: '',
        database: '',
        tableName: ''
      },
      spiderTypeList: [
        {
          value: 0,
          label: '国内招中标数据'
        },
        {
          value: 5,
          label: '政策数据'
        }
      ],
      previousSpiderType: '', // 切换之前的spiderType值
      machineList: [],
      databaseList: [],
      tableNameList: [],
      formData: { // 招中标表单
        title: '',
        pubtime: '',
        areaId: '',
        location: '',
        author: '',
        outurl: '',
        cateId: '',
        info: ''
      },
      formDataPolicy: { // 政策表单
        title: '',
        author: '',
        pubtime: '',
        outurl: '',
        info: '',
        areaId: '',
        cityId: '',
        tag: '',
        level: ''
      },
      dataVo: { // 插入数据后的返回值
        dataId: 0,
        tableName: '',
        spiderType: ''
      },
      dataObj: [],
      dataObjPolicy: [],
      dialogVisible: false,
      dialogVisiblePolicy: false,
      iframeContent: '', // info
      areaLabel: '',
      cityLabel: '',
      cateLabel: '',
      cities: [
        {
          value: 1,
          label: '中国'
        }, {
          value: 2,
          label: '北京'
        }, {
          value: 3,
          label: '安徽'
        }, {
          value: 4,
          label: '福建'
        }, {
          value: 5,
          label: '甘肃'
        }, {
          value: 6,
          label: '广东'
        }, {
          value: 7,
          label: '广西'
        }, {
          value: 8,
          label: '贵州'
        }, {
          value: 9,
          label: '海南'
        }, {
          value: 10,
          label: '河北'
        }, {
          value: 11,
          label: '河南'
        }, {
          value: 12,
          label: '黑龙江'
        }, {
          value: 13,
          label: '湖北'
        }, {
          value: 14,
          label: '湖南'
        }, {
          value: 15,
          label: '吉林'
        }, {
          value: 16,
          label: '江苏'
        }, {
          value: 17,
          label: '江西'
        }, {
          value: 18,
          label: '辽宁'
        }, {
          value: 19,
          label: '内蒙古'
        }, {
          value: 20,
          label: '宁夏'
        }, {
          value: 21,
          label: '青海'
        }, {
          value: 22,
          label: '山东'
        }, {
          value: 23,
          label: '山西'
        }, {
          value: 24,
          label: '陕西'
        }, {
          value: 25,
          label: '上海'
        }, {
          value: 26,
          label: '四川'
        }, {
          value: 27,
          label: '天津'
        }, {
          value: 28,
          label: '西藏'
        }, {
          value: 29,
          label: '新疆'
        }, {
          value: 30,
          label: '云南'
        }, {
          value: 31,
          label: '浙江'
        }, {
          value: 32,
          label: '重庆'
        }, {
          value: 33,
          label: '香港'
        }, {
          value: 34,
          label: '台湾'
        }, {
          value: 35,
          label: '澳门'
        }
      ],
      cateIds: [
        {
          value: 1,
          label: '招标'
        },
        {
          value: 2,
          label: '中标'
        },
        {
          value: 3,
          label: '开标记录'
        },
        {
          value: 4,
          label: '答疑补遗澄清变更'
        },
        {
          value: 5,
          label: '中标变更'
        },
        {
          value: 6,
          label: '废标流标终止'
        },
        {
          value: 7,
          label: '资格预审结果'
        },
        {
          value: -1,
          label: '未分类别'
        }
      ],
      tags: [
        {
          value: '政策法规',
          label: '政策法规'
        },
        {
          value: '政策解读',
          label: '政策解读'
        },
        {
          value: '市场分析',
          label: '市场分析'
        },
        {
          value: '行业规划',
          label: '行业规划'
        },
        {
          value: '地区规划',
          label: '地区规划'
        },
        {
          value: '招标办法与评标规则',
          label: '招标办法与评标规则'
        },
        {
          value: '宏观经济',
          label: '宏观经济'
        },
        {
          value: '财政信息',
          label: '财政信息'
        },
        {
          value: '债务信息',
          label: '债务信息'
        },
        {
          value: '政府工作报告',
          label: '政府工作报告'
        },
        {
          value: '其他',
          label: '其他'
        }

      ],
      levels: [
        {
          value: 1,
          label: '国家级'
        },
        {
          value: 2,
          label: '省级'
        },
        {
          value: 3,
          label: '市级'
        }
      ],
      rules: {
        title: {
          required: true,
          message: '不能为空',
          trigger: 'change'
        },
        pubtime: {
          required: true,
          message: '不能为空',
          trigger: 'change'
        },
        areaId: {
          required: true,
          message: '不能为空',
          trigger: 'change'
        },
        location: {
          required: true,
          message: '不能为空',
          trigger: 'change'
        },
        author: {
          required: true,
          message: '不能为空',
          trigger: 'change'
        },
        outurl: {
          required: true,
          message: '不能为空',
          trigger: 'change'
        },
        cateId: {
          required: true,
          message: '不能为空',
          trigger: 'change'
        },
        info: {
          required: true,
          message: '不能为空',
          trigger: 'change'
        }
      },
      rulesMachine: {
        spiderType: {
          required: true,
          message: '不能为空',
          trigger: 'change'
        },
        machine: {
          required: true,
          message: '不能为空',
          trigger: 'change'
        },
        database: {
          required: true,
          message: '不能为空',
          trigger: 'change'
        },
        tableName: {
          required: true,
          message: '不能为空',
          trigger: 'change'
        }
      },
      rulesPolicy: {
        title: {
          required: true,
          message: '不能为空',
          trigger: 'change'
        },
        author: {
          required: true,
          message: '不能为空',
          trigger: 'change'
        },
        pubtime: {
          required: true,
          message: '不能为空',
          trigger: 'change'
        },
        outurl: {
          required: true,
          message: '不能为空',
          trigger: 'change'
        },
        info: {
          required: true,
          message: '不能为空',
          trigger: 'change'
        },
        areaId: {
          required: true,
          message: '不能为空',
          trigger: 'change'
        },
        cityId: {
          required: true,
          message: '不能为空',
          trigger: 'change'
        },
        tags: {
          required: true,
          message: '不能为空',
          trigger: 'blur'
        },
        level: {
          required: true,
          message: '不能为空',
          trigger: 'blur'
        }
      }
    }
  },

  methods: {
    // 初始化选择框
    async spiderTypeChange(value) {
      if (!this.isClear()) {
        await this.$confirm('检测到未提交的数据，是否在离开页面前提交数据？', '提示', {
          distinguishCancelAndClose: true,
          confirmButtonText: '提交数据',
          cancelButtonText: '仍要切换'
        }).then(() => { // 提交
          this.machineForm.spiderType = this.previousSpiderType
          value = this.previousSpiderType
          this.addData()
        }).catch(action => {
          if (action === 'cancel') { // 切换
            this.linkage()
            this.resetData()
            this.resetDataPolicy()
            this.dataVo.dataId = 0 // 重置dataId
          } else { // 不切换
            this.machineForm.spiderType = this.previousSpiderType
            value = this.previousSpiderType
          }
        })
      } else {
        this.linkage()
        this.dataVo.dataId = 0 // 重置dataId
      }
      this.previousSpiderType = value // 将新值赋给旧值
    },

    // 根据数据类型联动另外三个选择框
    linkage() {
      if (this.machineForm.spiderType === 0) {
        this.machineList = [
          {
            value: '192.168.1.252',
            label: '192.168.1.252'
          }
        ]
        this.databaseList = [
          {
            value: 'suidaobig',
            label: 'suidaobig'
          }
        ]
        this.tableNameList = [
          {
            value: 'stang_bid_new',
            label: 'stang_bid_new'
          },
          {
            value: 'stang_cbid',
            label: 'stang_cbid'
          }
        ]
        this.machineForm.machine = '192.168.1.252'
        this.machineForm.database = 'suidaobig'
        this.machineForm.tableName = 'stang_bid_new'
      } else if (this.machineForm.spiderType === 5) {
        this.machineList = [
          {
            value: '192.168.1.241',
            label: '192.168.1.241'
          }
        ]
        this.databaseList = [
          {
            value: 'onlyForCrawler',
            label: 'onlyForCrawler'
          }
        ]
        this.tableNameList = [
          {
            value: 'stang_zhengce',
            label: 'stang_zhengce'
          }
        ]
        this.machineForm.machine = '192.168.1.241'
        this.machineForm.database = 'onlyForCrawler'
        this.machineForm.tableName = 'stang_zhengce'
      }
    },

    // 判断表单是否做过修改
    isClear() {
      if (this.machineForm.spiderType === 5) {
        return this.formData.title === '' &&
          this.formData.pubtime === '' &&
          this.formData.areaId === '' &&
          this.formData.location === '' &&
          this.formData.author === '' &&
          this.formData.outurl === '' &&
          this.formData.cateId === '' &&
          this.formData.info === ''
      } else if (this.machineForm.spiderType === 0) {
        return this.formDataPolicy.title === '' &&
          this.formDataPolicy.author === '' &&
          this.formDataPolicy.pubtime === '' &&
          this.formDataPolicy.outurl === '' &&
          this.formDataPolicy.info === '' &&
          this.formDataPolicy.areaId === '' &&
          this.formDataPolicy.cityId === '' &&
          this.formDataPolicy.tag === '' &&
          this.formDataPolicy.level === ''
      }
    },

    // 预览正文弹窗
    previewHtml() {
      if (this.machineForm.spiderType === 0) {
        if (this.formData.info === '') {
          this.$message({
            message: 'info为空',
            type: 'warning'
          })
        } else {
          this.iframeContent = this.formData.info
          this.$modal.show('addData-modal')
        }
      } else if (this.machineForm.spiderType === 5) {
        if (this.formDataPolicy.info === '') {
          this.$message({
            message: 'info为空',
            type: 'warning'
          })
        } else {
          this.iframeContent = this.formDataPolicy.info
          this.$modal.show('addData-modal')
        }
      }
    },

    // 提交数据
    addData() {
      if (this.machineForm.spiderType === 0) {
        this.$refs.formData.validate((err) => {
          // true表示校验通过, false表示校验失败
          if (!err) {
            this.$message({
              message: '内容校验不通过',
              type: 'error'
            })
          } else {
            this.$confirm('确定保存?', '提示', {
              cancelButtonText: '取消',
              confirmButtonText: '确定',
              type: 'warning'
            }).then(() => {
              this.formData.spiderType = this.machineForm.spiderType
              this.formData.machine = this.machineForm.machine
              this.formData.database = this.machineForm.database
              this.formData.tableName = this.machineForm.tableName
              return crawlerDetailApi.addData(this.formData)
            }).then((response) => {
              this.$message({
                type: 'success',
                message: '新增成功'
              })
              this.dataVo = response.data.result
              this.resetData()
            }).catch((reason) => {
              if (reason === 'cancel') {
                this.$message({
                  type: 'info',
                  message: '取消新增'
                })
              }
            })
          }
        })
      } else if (this.machineForm.spiderType === 5) {
        this.$refs.formDataPolicy.validate((err) => {
          // true表示校验通过, false表示校验失败
          if (!err) {
            this.$message({
              message: '内容校验不通过',
              type: 'error'
            })
          } else {
            this.$confirm('确定保存?', '提示', {
              cancelButtonText: '取消',
              confirmButtonText: '确定',
              type: 'warning'
            }).then(() => {
              this.formDataPolicy.spiderType = this.machineForm.spiderType
              this.formDataPolicy.machine = this.machineForm.machine
              this.formDataPolicy.database = this.machineForm.database
              this.formDataPolicy.tableName = this.machineForm.tableName
              return crawlerDetailApi.addDataPolicy(this.formDataPolicy)
            }).then((response) => {
              this.$message({
                type: 'success',
                message: '新增成功'
              })
              this.dataVo = response.data.result
              this.resetDataPolicy()
            }).catch((reason) => {
              if (reason === 'cancel') {
                this.$message({
                  type: 'info',
                  message: '取消新增'
                })
              }
            })
          }
        })
      }
    },

    // 新增完成后查询数据
    getData() {
      if (this.machineForm.spiderType === 0) {
        this.dialogVisible = true
        // 发送请求
        crawlerDetailApi.crawlerDataById(this.dataVo).then((response) => {
          const dataObj = response.data.result
          this.areaLabel = this.getLabel(dataObj[0].areaId)
          this.cityLabel = this.getLabel(dataObj[0].cityId)
          this.cateLabel = this.getCateLabel(dataObj[0].cateId)
          this.dataObj = JSON.parse(JSON.stringify(dataObj))
        })
      } else if (this.machineForm.spiderType === 5) {
        this.dialogVisiblePolicy = true
        // 发送请求
        crawlerDetailApi.crawlerDataById(this.dataVo).then((response) => {
          const dataObjPolicy = response.data.result
          this.areaLabel = this.getLabel(dataObjPolicy[0].areaId)
          this.cityLabel = this.getLabel(dataObjPolicy[0].cityId)
          this.cateLabel = this.getCateLabel(dataObjPolicy[0].cateId)
          this.dataObjPolicy = JSON.parse(JSON.stringify(dataObjPolicy))
        })
      }
    },

    // 预览正文弹窗
    previewHtml2() {
      if (this.machineForm.spiderType === 0) {
        if (this.dataObj[0].info === '') {
          this.$message({
            message: 'info为空',
            type: 'warning'
          })
        } else {
          this.iframeContent = this.dataObj[0].info
          this.$modal.show('addData-modal2')
        }
      } else if (this.machineForm.spiderType === 5) {
        if (this.dataObjPolicy[0].info === '') {
          this.$message({
            message: 'info为空',
            type: 'warning'
          })
        } else {
          this.iframeContent = this.dataObjPolicy[0].info
          this.$modal.show('addData-modal2')
        }
      }
    },

    // 根据返回的cityId展示不同的cityLabel
    getLabel(cityId) {
      const citylabel = this.cities.find(city => city.value === cityId)
      return citylabel ? citylabel.label : ''
    },

    getCateLabel(cateId) {
      const cateLabel = this.cateIds.find(cate => cate.value === cateId)
      return cateLabel ? cateLabel.label : ''
    },

    resetData() {
      this.formData = {
        title: '',
        pubtime: '',
        areaId: '',
        location: '',
        author: '',
        outurl: '',
        cateId: '',
        info: ''
      }
      this.$refs.formData.resetFields()
    },

    resetMachineFormData() {
      this.machineForm = {
        spiderType: '',
        machine: '',
        database: '',
        tableName: ''
      }
    },

    resetDataPolicy() {
      this.formDataPolicy = {
        title: '',
        author: '',
        pubtime: '',
        outurl: '',
        info: '',
        areaId: '',
        cityId: '',
        tag: '',
        level: ''
      }
      this.$refs.formDataPolicy.resetFields()
    },

    // 附件下载
    downloadFile(url) {
      if (url) {
        window.open(url)
      } else {
        this.$message({
          message: '附件为空',
          type: 'warning'
        })
      }
    },

    // 表头style
    headStyle() {
      return 'text-align: center; font-size: 16px; height: 90px; color: black; backgroundColor: rgba(160,188,231,0.1)'
    },

    // 列style
    cellStyle({ row, column, rowIndex, columnIndex }) {
      if ((rowIndex + 1) % 2 === 0) {
        return 'text-align: center; font-size: 15px; height: 60px; color: #303133; background: rgba(160,188,231,0.1)'
      } else {
        return 'text-align: center; font-size: 15px; height: 60px; color: #303133; backgroundColor: white'
      }
    }
  }
}
</script>

<style scoped>

</style>
<style>
  .my-form-item .el-form-item__label {
    font-size: 16px;
    color: black;
  }
  .custom-box {
    height: 900px;
    width: 1000px;
    overflow-y: auto;
  }
  .dialog {
    width: 3000px;
    position: fixed;
    margin-left: -1450px;
    margin-top: -450px;
    left: 50%;
    top: 50%;
  }

  .vm--container {
    z-index: 9999 !important;
  }

  .vm--modal {
    top: 80px !important;
    left: 500px !important;
    height: 800px !important;
    width: 1000px !important;
  }
  iframe {
    height: 745px;
    width: 1002px;
    margin-left: -2px;
  }
</style>
